<template>
  <el-form :model="formDataViewShow" class="search-cont" :label-col="labelCol" v-bind="$attrs">
    <el-row class="box" :gutter="40">
      <el-col
          v-for="(item, index) in listForm"
          :key="index"
          :span="item.span ? item.span : 6"
      >
        <!-- 自定义插槽 -->
        <template v-if="item.slotName">
          <slot :name="item.keyName" :item="item" :row="formDataViewShow"></slot>
        </template>

        <el-form-item :label="item.label || ''" v-if="item.type === 'el-input'">
          <el-input
              v-model="formDataViewShow[item.keyName]"
              :placeholder="item.placeholder || '请输入'"
          />
        </el-form-item>

        <!-- 下拉框 -->
        <el-form-item :label="item.label || ''" v-if="item.type === 'el-select'">
          <el-select
              v-model="formDataViewShow[item.keyName]"
              :placeholder="item.placeholder || '请输入'"
              @change="changeHandler"
          >
            <el-option
                v-for="(selectCont, selectIndex) in item.options"
                :key="selectIndex"
                :label="selectCont.label"
                :value="selectCont.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 日期选择器 -->
        <el-form-item :label="item.label || ''" v-if="item.type === 'el-date-picker'">
          <el-date-picker
              v-model="formDataViewShow[item.keyName]"
              valueFormat="YYYY-MM-DD"
              format="YYYY-MM-DD"
              class="setdate-width"
          />
        </el-form-item>

        <!-- 时间段 -->
        <el-form-item :label="item.label || ''" v-if="item.type === 'el-range-picker'">
          <el-date-picker
              v-model="formDataViewShow[item.keyName]"
              type="datetimerange"
              start-placeholder="Start date"
              end-placeholder="End date"
              format="YYYY-MM-DD HH:mm:ss"
              date-format="YYYY/MM/DD ddd"
              class="setdate-width"
          />
        </el-form-item>

        <el-form-item :label="item.label || ''" v-if="item.type === 'el-week-picker'">
          <el-date-picker
              v-model="formDataViewShow[item.keyName]"
              type="week"
              format="[第] ww [周]"
              placeholder="选择周"
          />
        </el-form-item>

        <!-- 数字输入框 -->
        <el-form-item :label="item.label || ''" v-if="item.type === 'el-input-number'">
          <el-input-number
              id="inputNumber"
              v-model="formDataViewShow[item.keyName]"
              :min="1"
              :max="10"
          />
        </el-form-item>
      </el-col>

      <el-col flex="auto" class="btnflex" v-if="isSearchBtnList">

        <div class="leftBtnBox">
          <slot name="left"></slot>
        </div>

        <!--        使用示例-->
        <!--        <template #left>-->
        <!--          <el-button>新增</el-button>-->
        <!--          <el-button>删除</el-button>-->
        <!--        </template>-->
        <el-button type="primary" @click="searchHandler">搜索</el-button>
        <el-button style="margin-left: 10px" @click="resetHandler">重置</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import {TableDataItem} from "@/views/components/table/ZTable/type.ts";

export interface FormDataItem {
  type: string;
  label?: string;
  placeholder?: string;
  keyName: string;
  span?: Number;
  default?: any;
  options?: Array<{ value: any; label: string }>;
  slotName?: string;
}

// interface FormData {
//   listForm: FormDataItem[];
// }

const props = defineProps({
  listForm: {
    type: Array as () => FormDataItem[],
    required: true,
    default: () => [],
  },
  isSearchBtnList: {
    type: Boolean,
    default: () => {
      return true
    }
  }
});

const emits = defineEmits<{
  (e: 'resetHandler', row: TableDataItem, index?: number): void;
  (e: 'searchHandler', row: TableDataItem, index?: number): void;
  (e: 'deleteRow', row: TableDataItem, index?: number): void;
  (e: 'editRow', row: TableDataItem, index?: number): void;
  (e: 'detailRow', row: TableDataItem, index?: number): void;
  (e: 'infoRow', row: TableDataItem, index?: number): void;
  (e: 'TSelected', row: TableDataItem): void;
  // 为其他事件添加类型定义，如果它们需要传递参数的话
  (e: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q', ...args: any[]): void;
}>();

const getFormData = (): { [key: string]: any } => {
  const result: { [key: string]: any } = {};
  props.listForm.forEach(item => {
    if (item.type === 'el-select') {
      result[item.keyName] = item.default || undefined;
    } else {
      result[item.keyName] = item.default || '';
    }
  });
  return result;
};

const formDataViewShow = ref(getFormData());

const clearDealBack = (): { [key: string]: string | undefined } => {
  formDataViewShow.value = getFormData();
  const obj = getFormData();
  const newobj: { [key: string]: string | undefined } = {};
  for (const keysName in obj) {
    newobj[keysName] = obj[keysName] || '';
  }
  return newobj;
};

const searchDealBack = (): { [key: string]: string } => {
  const obj = formDataViewShow.value;
  const newobj: { [key: string]: string } = {};
  for (const keysName in obj) {
    if (obj[keysName] === undefined) {
      newobj[keysName] = '';
    } else {
      newobj[keysName] = obj[keysName] as string;
    }
  }
  return newobj;
};

const resetHandler = () => {
  emits('resetHandler', clearDealBack());
};

const searchHandler = () => {
  emits('searchHandler', searchDealBack());
};

const changeHandler = () => {
  emits('searchHandler', searchDealBack());
};

const labelCol = {style: {width: '75px'}} as const;
</script>

<style lang="scss" scoped>
.search-cont {
  width: 100%;
  padding: 10px;
}

.setdate-width {
  width: 100%;
}

.btnflex {
  text-align: right;
  padding-right: 50px !important;
}

.leftBtnBox {
  display: inline-block;
  float: left;

  &button {
    margin-right: 10px;
  }
}
</style>
